<template>
  <div class="app-container">
    <div class="register">
      <el-row>
        <el-button type="primary" @click="addNavigation()" class="dakai">新增顶部导航</el-button>
      </el-row>
    </div>
    <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
      <el-table-column label="名称" min-width="200">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="打开窗口" min-width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.isNewWin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.isOpen }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="400" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.parentId===0" @click="addCLick(scope.row)">添加二级导航</el-button>
          <el-button @click="updateCLick(scope.row)">编辑</el-button>
          <el-button @click="deleteCLick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>

    <!-- 新增顶部导航弹窗 -->
    <el-dialog :visible.sync="DialogVisible" title="新增" width="38%">
      <div style="width:100%;float:left;height:300px;">
        <el-form :model="Navigation" label-position="right" label-width="80px" ref="dataForm">
          <el-form-item label="名称">
            <el-input v-model="Navigation.name" style="width:80%;"/>
            <el-input v-model="Navigation.type" type="hidden"/>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="Navigation.url" style="width:80%"/>
          </el-form-item>
          <el-form-item label="新开窗口">
            <el-radio-group v-model="Navigation.isNewWin">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="Navigation.isOpen">
              <el-radio label="1">开启</el-radio>
              <el-radio label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="createData(),DialogVisible = false">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 新增顶部导航弹窗 -->

    <!-- 添加二级导航 -->
    <el-dialog :visible.sync="handleAdd" title="新增二级导航" width="38%">
      <div style="width:100%;float:left;height:415px;">
        <el-form :model="Navigation" label-position="right" label-width="80px" ref="childrenForm">
          <el-form-item label="上级导航">
            {{Navigation.parentName}}
            <el-input v-model="Navigation.parentId" type="hidden"/>
            <p style="color:#606266">请注意：增加子导航后，对应的上级导航链接将不起作用。</p>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="Navigation.name" style="width:80%"/>
            <el-input v-model="Navigation.type" type="hidden"/>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="Navigation.url" style="width:80%"/>
          </el-form-item>
          <el-form-item label="新开窗口">
            <el-radio-group v-model="Navigation.isNewWin">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="Navigation.isOpen">
              <el-radio label="1">开启</el-radio>
              <el-radio label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAdd = false">取 消</el-button>
        <el-button type="primary" @click="createChildrenData(),handleAdd = false">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 添加二级导航 -->

    <!-- 编辑 -->
    <el-dialog :visible.sync="handleEdit" title="编辑顶部导航" width="38%">
      <div style="width:100%;float:left;">
        <el-form :model="Navigation" label-position="right" label-width="80px" ref="dataForm">
          <el-form-item label="名称">
            <el-input v-model="Navigation.name" style="width:80%"/>
            <el-input v-model="Navigation.type" type="hidden"/>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="Navigation.url" style="width:80%"/>
          </el-form-item>
          <el-form-item label="自定义页面">
            <el-select v-model="Navigation.custompage" style="width:120px;">
              <el-option
                v-for="item in custompageList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="新开窗口">
            <el-radio-group v-model="Navigation.isNewWin">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="Navigation.isOpen">
              <el-radio label="1">开启</el-radio>
              <el-radio label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEdit = false">取 消</el-button>
        <el-button type="primary" @click="updateData()">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->

    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->

    <!-- 底部 -->
    <div class="foot">
      <ul>
        <li v-for="(item,index) in footContent" :key="index">{{ item.label }} : {{ item.value }}</li>
      </ul>
    </div>
    <!-- 底部 -->
  </div>
</template>

<script>
  import treeTable from "@/components/TreeTable";
  import treeToArray from "./navhead/navhead.js";
  import {add, deleteNavigation, list, update} from "@/api/system/topNavigation"; // 数据接口
  import {getTenantId} from '@/utils/auth';
  import {getPageManagementList} from '@/api/operate/pageManagement'

  export default {
    name: "CustomTreeTableDemo",
    components: {treeTable},
    props: {
      expandAll: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        custompageList: [
          {
            'value': '',
            'label': '不启用',
            'id': null,
            'url': null
          }
        ],
        Navigation: {
          id: "",
          name: "",
          url: "",
          isNewWin: "1",
          isOpen: "1",
          parentId: 0,
          parentName: "",
          type: "top",
          custompage: ""
        },
        DialogVisible: false,
        handleAdd: false,//添加二级导航
        handleEdit: false,//编辑
        handleDelete: false,//删除
        deleteRow: '',
        // 列表编辑按钮
        updateCLick(row) {
          this.handleEdit = true;
          this.Navigation = Object.assign({}, row);
          if (this.Navigation.isNewWin === '是') this.Navigation.isNewWin = '1';
          if (this.Navigation.isNewWin === '否') this.Navigation.isNewWin = '0';
          if (this.Navigation.isOpen === '开启') this.Navigation.isOpen = '1';
          if (this.Navigation.isOpen === '关闭') this.Navigation.isOpen = '0';
          for (const item in this.custompageList) {
            if (this.Navigation.custompage === this.custompageList[item].id) {
              this.Navigation.custompage = this.custompageList[item].title;
            }
          }
        },
        addNavigation() {
          this.DialogVisible = true;
          this.Navigation = {id: "", name: "", url: "", isNewWin: "1", isOpen: "1", parentId: 0, parentName: "", type: "top", custompage: ""}
        },
        addCLick(row) {
          this.handleAdd = true;
          this.Navigation = {};
          this.Navigation.parentId = row.id;
          this.Navigation.parentName = row.name;
          this.Navigation.isNewWin = "1";
          this.Navigation.isOpen = "1";
        },
        deleteCLick(row) {
          this.handleDelete = true;
          this.deleteRow = row;
        },
        func: treeToArray,
        data: [],
        args: [null, null, "timeLine"],
        footContent: [
          {
            label: "公司简介",
            value: "域名/eduxcloud/eduCustomPageAction!aboutUs.action"
          },
          {
            label: "教师团队",
            value: "域名/eduxcloud/template001/home/TeacherInformationAction!teacherTeam.action"
          },
          {
            label: "服务与保障",
            value: "域名/eduxcloud/eduCustomPageAction!serviceAndGuarantee.action"
          },
          {
            label: "尊享专区",
            value: "域名/eduxcloud/eduCustomPageAction!exclusiveZone.action"
          },
          {
            label: "分校",
            value: "域名/eduxcloud/eduCustomPageAction!branchSchool.action"
          }
        ]
      };
    },
    created() {
      this.getData();
      this.getCustompageList()
    },
    methods: {
      message(row) {
        this.$message.info(row.event);
      },
      // 接口获取数据
      getData() {
        list('top').then(response => {
          if (response.data && response.data.items) {
            this.data = response.data.items.filter(item => {
              if (item.tenantId === getTenantId()) return true
            });
            this.data.map(item => {
              if (typeof item.children !== "undefined") {
                item.children.map(i => {
                  if (i.isNewWin === '1') i.isNewWin = '是';
                  if (i.isNewWin === '0') i.isNewWin = '否';
                  if (i.isOpen === '1') i.isOpen = '开启';
                  if (i.isOpen === '0') i.isOpen = '关闭';
                })
              }
              if (item.isNewWin === '1') item.isNewWin = '是';
              if (item.isNewWin === '0') item.isNewWin = '否';
              if (item.isOpen === '1') item.isOpen = '开启';
              if (item.isOpen === '0') item.isOpen = '关闭';
            });
            this.total = this.data.length;
            this.listFilter = this.data;
          }
        })
      },
      createData() {
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            this.Navigation.tenantId = getTenantId();
            add(this.Navigation).then(() => {
              this.$notify({
                title: "成功",
                message: "创建成功",
                type: "success",
                duration: 2000
              });
              this.getData();
            })
          }
        })
      },
      createChildrenData() {
        this.$refs["childrenForm"].validate(valid => {
          if (valid) {
            this.Navigation.tenantId = getTenantId();
            add(this.Navigation).then(() => {
              this.$notify({
                title: "成功",
                message: "创建成功",
                type: "success",
                duration: 2000
              });
              this.getData();
            })
          }
        })
      },
      updateData() {
        this.handleEdit = false;
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.Navigation.custompage) {
              this.Navigation.url = this.custompageList[this.Navigation.custompage].url;
              this.Navigation.custompage = this.custompageList[this.Navigation.custompage].id;
            }
            update(this.Navigation).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.getData();
            })
          }
        })
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteNavigation(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getData();
        })
      },
      getCustompageList() {
        getPageManagementList().then(res => {
          const list = res.data.items.filter(item => {
            if (item.tenantId === getTenantId()) return true
          });
          for (const item in list) {
            this.custompageList.push({'value': item, 'label': list[item].title, 'id': list[item].id, 'url': list[item].url})
          }
        })
      }
    }
  };
</script>
<style lang="scss">
  .app-container {
    .register {
      width: 100%;
      height: 44px;
      line-height: 44px;
      padding-left: 10px;
      background-color: #e7e9ed;
      padding-top: 15px;
      padding-right: 34px;
      margin-bottom: 20px;

      .dakai {
        float: right;
        position: absolute;
        right: 10px;
        bottom: -25px;
      }
    }

    .foot {
      margin-top: 20px;
      padding: 15px 15px;
      border-radius: 5px;
      background-color: #d9edf7;
      color: #326f8f;
      border-left: 5px solid #50bfff;

      ul {
        text-decoration: none;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          margin-top: 5px;
        }
      }
    }
  }
</style>
